<template>
  <el-dialog title="编辑功能" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="功能名称" prop="funcName">
        <el-input v-model="form.funcName"></el-input>
      </el-form-item>
      <!-- <el-form-item label="功能ID" prop="funcId">
        <el-input v-model="form.funcId"></el-input>
      </el-form-item>-->
      <el-form-item label="功能样式">
        <el-input v-model="form.funcIcon"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="funcType">
        <el-radio-group v-model="form.funcType">
          <el-radio-button label="页面" />
          <el-radio-button label="按钮" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序值" prop="showOrders">
        <el-input-number v-model="form.showOrders" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="功能路径" prop="funcUrls">
        <el-input v-model="form.funcUrls"></el-input>
      </el-form-item>
      <el-form-item label="功能描述">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('editForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { baseUrl } from "@/config/env";
const urls = {
  // checkField: baseUrl + "/backletter/common/check_unique_notme", // 验证编码唯一性
  save: baseUrl + "/cp/func/au-func/edit", // 保存
  get: baseUrl + "/cp/func/au-func/edit_form"
};
export default {
  data() {
    return {
      dialogVisible: false,
      super_menu: {
        code: ""
      },
      form: {
        funcName: null,
        description: null,
        funcUrls: null,
        funcIcon: null,
        funcType: null,
        showOrders: 0
      },
      rules: {
        funcName: [
          { required: true, message: "请输入功能名称", trigger: "blur" }
        ],
        funcId: [
          { required: true, message: "请输入功能编码", trigger: "change" },
          { min: 3, max: 20, message: "长度必须为3-20个字符", trigger: "blur" },
          {
            //validator: (rule, value, callback) => {
              // let code = this.super_menu.code + value;
              // axios
              //   .get(urls.checkField, {
              //     params: {
              //       table: "t_fk_auth",
              //       field: "code",
              //       value: code,
              //       kid: this.form.kid
              //     }
              //   })
              //   .then(res => {
              //     if (res.data.result) {
              //       callback("功能ID必须唯一");
              //     } else {
              //       callback();
              //     }
              //   });
            //},
            trigger: "blur"
          }
        ],
        funcType: [
          { required: true, message: "请选择功能类型", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    show(objectId) {
      this.dialogVisible = true;
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
      this.fetch(objectId);
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.form.funcType === "页面") {
            this.form.funcType = 0;
          } else {
            this.form.funcType = 1;
          }
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    },
    fetch(objectId) {
      axios.get(urls.get, { params: { objectId: objectId } }).then(res => {
        let data = res.data.result;
        this.form = {
          objectId: data.objectId,
          funcName: data.funcName,
          funcUrls: data.funcUrls,
          funcIcon: data.funcIcon,
          funcType: data.funcType == "0" ? "页面" : "按钮",
          description: data.description,
          showOrders: data.showOrders
        };
      });
    }
  }
};
</script>